<template>
  <el-dialog
    title="测试"
    :visible.sync="dialogVisible">
    <div id="testchartId" style="width:300px;height:300px;"></div>
    <div id="testchartId2" style="width:500px;height:300px;"></div>
  </el-dialog>
</template>

<script>
import myEcharts from '@/utils/echarts/echarts-util.js'
export default {
  data () {
    return {
      dialogVisible: false
    }
  },
  mounted () {
  },
  methods: {
    init () {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.initEcharts()
        this.charts2()
      })
    },
    initEcharts () {
      var data = [{name: '男生', value: 10}, {name: '女生', value: 20}]
      var option = myEcharts.EchartsOption.pie('男女人数统计', '单位（人）', data)
      var initChart = myEcharts.initChart(option, 'testchartId')
      var options = {
        color: ['#FDB157', '#3498DB'],
        legend: {
          orient: 'vertical', // 垂直：vertical； 水平 horizontal
          right: 'right'
        },
        series: [{
          radius: '55%', // 圆的大小
          center: ['50%', '60%'] // 位置居中
        }]
      }
      initChart.setOption(options)
    },
    charts2 () {
      let dataX = ['信息中心', '省公司', '综合单位', '灾备中心1', '灾备中心2', '灾备中心3']
      let data = [
        {
          name: '数据库',
          value: [46, 96, 35, 78, 88, 59]
        },
        {
          name: '中间件',
          value: [94, 66, 88, 43, 54, 34]
        },
        {
          name: '标准应用',
          value: [73, 89, 68, 92, 84, 45]
        },
        {
          name: '其他',
          value: [23, 37, 22, 25, 36, 67]
        }
      ]
      let option = myEcharts.EchartsOption.bar('', '', dataX, data)
      let initChart = myEcharts.initChart(option, 'testchartId2')
      let series = []
      for (let i = 0; i < data.length; i++) {
        let itemStyle = {
          itemStyle: {
            normal: {
              barBorderRadius: [2, 2, 0, 0]
            }
          }
        }
        series.push(itemStyle)
      }
      let options = {
        color: ['#6facef', '#e59562', '#6cad90', '#f7cc77'],
        series: series
      }
      initChart.setOption(options)
    }
  }
}
</script>
